//引入Vuex,并使用插件
import Vuex from "vuex"
import Vue from 'vue'
Vue.use(Vuex)
//actions对象--用于响应组件中的动作
const actions = {
    // increment({ commit }, value) {
    //     //通知mutations修改state
    //     commit('INCREMENT', value)
    // },
    // decrement({ commit }, value) {
    //     //通知mutations修改state
    //     commit('DECREMENT', value)
    // },
    incrementOdd({ commit, state }, value) {
        //如果sum为奇数
        if (state.sum % 2 != 0) {
            //通知mutations修改state
            commit('INCREMENT', value)
        }
    },
    incrementAwait({ commit }, value) {
        setTimeout(() => {
            commit('INCREMENT', value)
        }, 1000);
    }
}
//mutations对象--用于操作数据(state)
const mutations = {
    INCREMENT(state, value) {
        //修改state中的数据
        state.sum += value
    },
    DECREMENT(state, value) {
        //修改state中的数据
        state.sum -= value
    },
}
//getters对象--计算属性
const getters = {
    //对state中的属性值进行计算
    bigSum(state) {
        return state.sum * 10
    }
}
//state对象--用于存储数据
const state = {
    sum: 0
}
//创建store对象
const store = new Vuex.Store({
    actions,
    mutations,
    getters,
    state
})
export default store

//开启vuex命名空间

//定义组件1的小仓库
const component1 = {
    namespaced: true,
    actions: {},
    mutations: {},
    getters: {},
    state: {}
}
//定义组件2的小仓库
const component2 = {
    namespaced: true,
    actions: {},
    mutations: {},
    getters: {},
    state: {}
}
//定义大仓库
const store1 = new Vuex.Store({
    //在大仓库中注册小仓库
    modules: {
        component1,
        component2
    }
})
//在组件中使用对应的dispatch
// this.$store.dispatch('小仓库名字/xxxactions名字',传递的数据)
//在组件中使用mapgetters
// ...mapGetters('仓库名字',['xxx属性名'])
//  ...mapState的两种写法
// ...mapState('仓库名字',['xxx属性名'])
// ...mapState({
//     xxx属性名:state=>state.xxx仓库名.xxx属性名
//  }),

